<template>
  <!-- 商品管理 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag v-model:value="queryParam.ddlxIds" mode="multiple" :maxTagCount="0" dictCode="ddlxType@ddlxUser" placeholder="全部" :autofocus="false" />
          </a-form-item>
        </a-col>

        <a-col flex="160px">
          <a-form-item label="银行账户" :label-col="{ style: { width: '70px' } }">
            <JDictSelectTag 
              v-model:value="queryParam.bankIds" 
              mode="multiple" 
              dictCode="chee_bank,djm,id,1=1 order by sort"
              placeholder="全部" 
              :maxTagCount="0"
              :dropdownStyle="{ width: '200px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :allowClear="true"
              :showArrow="false"
              :showSearch="true"
            />
          </a-form-item>
        </a-col>

        <a-col flex="110px">
          <a-form-item label="类型" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
            <a-select v-model:value="queryParam.sflx" id="sflx" class="w80" placeholder="全部" :showArrow="false" :allowClear="true">
              <a-select-option value="1">收入</a-select-option>
              <a-select-option value="2">支出</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="140px">
          <a-form-item label="分解" :label-col="{ style: { width: '40px' } }" >
            <a-select v-model:value="queryParam.uncouple" id="sflx" class="w80" placeholder="全部" :showArrow="false" :allowClear="false">
              <a-select-option value="1">系统流水</a-select-option>
              <a-select-option value="2">订单流水</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float: right; width: 100px">
          <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
            <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
          </span>
        </a-col>
      </a-row>

    </a-form>
  </div>

  <!--引用表格-->
  <BasicTable @register="registerTable">
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
    </template>
  </BasicTable>

  <!-- 表单区域 
  <CategoryModal @register="registerModal" @success="handleSuccess"></CategoryModal>-->

  <GoodsOperation @register="registerModal" @success="handleSuccess"></GoodsOperation>
</template>

<script lang="ts" name="goods-category" setup>
import { ref, computed, unref, reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, searchFormSchema } from './goods.data';
import { dateFormat, filterObj, formatAmount } from '/@/utils/common/compUtils';
import {
  getGoodsListDataSeller,
  getGoodsSkuListDataSeller,
  updateGoodsSkuStocks,
  upGoods,
  lowGoods,
  deleteGoods,
  batchShipTemplate,
  downLoadGoods,
  uploadGoodsExcel
} from './goods.api';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import dayjs from 'dayjs';
import GoodsOperation from './goodsOperation.vue';


//定义查询表单，查询条件
const queryParam = reactive<any>({
  ddlxIds: [],
  today: '0', //未审
  jzsjBegin: dayjs().subtract( 3, 'month').startOf('month').format('YYYY-MM-DD'),
  jzsjEnd: dayjs().add(0, 'month').endOf('month').format('YYYY-MM-DD'),
  shbj: '',
  uncouple: '1',
  bankIds: [],
  userIds: [],
  sflx: null,
  insider: null,
  beginJe: '',
  endJe: '',
  orderId: '',
  dfhm: '',
  bankOid: '0'
});

//import CategoryModal from './modules/CategoryModal.vue';


//注册table数据
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    api: getGoodsListDataSeller,
    columns: columns,
    size: 'small',
    striped: true,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: true,
    actionColumn: {
      width: 100,
    },
  },
});

const [registerTable, { reload, setProps }, { rowSelection, selectedRowKeys }] = tableContext;


function searchQuery() {
  //filterObj
  let params = toRaw(filterObj(queryParam));
  if (typeof params.shbj === 'undefined') {
    params.shbj = '';
  }
  setProps({ searchInfo: params });
  reload();
}

//注册 : openGoodsOperationModal
const [registerModal, { openModal }] = useModal();



// 添加商品
function addGoods() {
  //$router.push({ name: "goods-operation" });
}

// 编辑商品
function editGoods(v) {
  //$router.push({ name: "goods-operation-edit", query: { id: v.id } });
}

/**
 * 新增事件
 */
function handleAdd() {
  openModal(true, {
    isUpdate: false,
    showFooter: true,
  });
}

/**
 * 编辑事件
 */
function handleEdit(record) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}
/**
 * 详情
 */
function handleDetail(record) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: false,
  });
}

/**
 * 删除事件
 */
async function handleDelete(record) {
  //await deleteGoods({ id: record.id }, reload);
}

/**
 * 成功回调
 */
function handleSuccess({ isUpdate, values }) {
  reload();
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
  return [
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>
<style lang="less" scoped>
  .table-page-search-submitButtons{
    button {
      margin-left: 5px;
    }
  }
</style>